<template>
	<div class="about">
		<el-tabs v-model="activeName" @tab-click="handleClick">
		<el-tab-pane label="用户信息" name="info">
			<h1>基本信息</h1>
			<el-form>
			<el-form-item label="名字:">
				<span>{{model.editor}}</span>
			</el-form-item>
			<el-form-item label="用户权限:">
				<span v-if="model.role=='super_admin'">超级管理员</span>
				<span v-if="model.role=='admin'">管理员</span>
			</el-form-item>
		</el-form>
		<el-divider/>
			<h1>内容管理</h1>
			<el-input v-model="search" style="width:auto" size="small" placeholder="输入关键字搜索标题">
				<i class="el-icon-edit el-input__icon"
					slot="suffix"/>
			</el-input>
			<el-table :data="items.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" border>
			<el-table-column prop="tag" label="分类"></el-table-column>
			<el-table-column prop="name" label="标题"></el-table-column>
			<el-table-column prop="editTime" label="最后编辑时间"></el-table-column>
			<el-table-column fixed="right" label="审核状态" prop="check">
			</el-table-column>
			<el-table-column fixed="right" label="操作" width="270" prop="id">
				<template slot-scope="scope"
				v-if="scope.row.editor_id==id||model.role=='super_admin'">
					<el-button type="text" size="small" @click="goto(scope.row)">编辑</el-button>
					<el-button type="text" size="small" @click="remove(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page.sync="currentPage"
			:page-sizes="[5, 10, 15, 20]"
			:page-size="5"
			layout="total, prev, pager, next, jumper"
			:total=items.length>
		</el-pagination>
		</el-tab-pane>
		<el-tab-pane label="更改信息" name="edit">
			<h1>更改名字</h1>
		<el-form label-width="120px" @submit.native.prevent="changeName">
			<el-form-item label="名字">
				<el-input v-model="model.editor"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" native-type="submit">保存</el-button>
			</el-form-item>
		</el-form>
		<el-divider/>
		<h1>更改密码</h1>
		<el-form label-width="120px" @submit.native.prevent="changePassword">
			<el-form-item label="用户名">
				<el-input :disabled="true" v-model="model.username"></el-input>
			</el-form-item>
			<el-form-item label="新密码">
				<el-input type="password" v-model="newPassword"></el-input>
			</el-form-item>
			<el-form-item label="确认密码">
				<el-input type="password" v-model="confirm"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" native-type="submit">保存</el-button>
			</el-form-item>
		</el-form>
		</el-tab-pane>
		</el-tabs>
		
	</div>
</template>

<script>
	export default {
		props: {
			id: {}
		},
		data() {
			return {
				model: {},
				newPassword:'',
				confirm:'',
				activeName: 'info',
				items:[],
				search:'',
				currentPage:0
			}
		},
		methods: {
			async changeName() {
				let res
				if (this.model.editor == null || this.model.editor.length == 0 ) {
					this.$message({
						type: 'warning',
						message: '输入内容不能为空'
					})
				} else {
						res = await this.$http.put(`rest/admin_users/${this.id}`, this.model)
						console.log(res.data)
						this.$message({
							type: 'success',
							message: '名字更改成功'
						})
				}
			},
			async changePassword() {
				let res
				if (this.newPassword == null || this.newPassword.length == 0 ||this.confirm == null || this.confirm.length == 0 ) {
					this.$message({
						type: 'warning',
						message: '输入内容不能为空'
					})
				} else {
					if (this.confirm == this.newPassword) {
						this.model.password = this.confirm
						res = await this.$http.put(`rest/admin_users/${this.id}`, this.model)
						console.log(res.data)
						this.$message({
							type: 'success',
							message: '密码更改成功'
						})
					} else {
						this.$message({
							type: 'warning',
							message: '两次输入密码不一致！'
						})
					}
				}
			},
			async fetch() {
				const res = await this.$http.get(`rest/admin_users/${this.id}`)
				this.model = res.data
				this.handleEdit(this.items)
			},
			async handleEdit(items){
				const achievementList = await this.$http.get(`rest/achievement`)
				const contestList = await this.$http.get(`rest/contests`)
				const articleList = await this.$http.get(`rest/articles`)
				for(var i=0;i<achievementList.data.length;i++){
					if(achievementList.data[i].editor_id==this.id)
						items.push({
							"editor_id":achievementList.data[i].editor_id,
							"name":achievementList.data[i].name,
							"tag":"竞赛成果",
							"editTime":achievementList.data[i].editTime,
							"check":achievementList.data[i].check,
							"id":achievementList.data[i]._id})
				}
				for(var j=0;j<contestList.data.length;j++){
					if(contestList.data[j].editor_id==this.id)
						items.push({
							"editor_id":contestList.data[j].editor_id,
							"name":contestList.data[j].name,
							"tag":"竞赛信息",
							"editTime":contestList.data[j].editTime,
							"check":contestList.data[j].check,
							"id":contestList.data[j]._id})
				}
				for(var k=0;k<articleList.data.length;k++){
					if(articleList.data[k].editor_id==this.id)
						items.push({
							"editor_id":articleList.data[k].editor_id,
							"name":articleList.data[k].title,
							"tag":"通知文章",
							"editTime":articleList.data[k].editTime,
							"check":articleList.data[k].check,
							"id":articleList.data[k]._id
						})
				}
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},

			remove(row){
				console.log(row)
			},
			goto(row){
				console.log(row)
				this.$router.push(`/achievement/edit/${row.id}`)
			}
		},
		created() {
			this.id && this.fetch()
			this.reload()
			if(this.id == null){
				this.$router.go(-1);//返回上一层
			}
		}
	}
</script>
